
Hello Design ! 

Let’s Think & Build Things 

r AHMED FARIS 

UX/UI DESIGNER @ INTERNATIONAL TURNKEY SYSTEMS 


FOUNDER & PRESIDENT OF ALMEJARRA COWORKING SPACE 



We’ll Learn 

What is Design, Who is The Designer 

Types of Design, Digital Design, UX Design, Ul Design, 

Web Design, Design Thinking, Research, IXDesign, Wireframing, Prototyping 
Visual Design, Usability, Coulours, Typography, Iconography, Grid System, Photoshop 
PSD, Slicing, Structure, front end developing, ui developing, html, css, javascript, develop, ui-dev 
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Divisions .... 


Design 

Elements 


LINE. 

A line is a mark between two points. There are various types of lines, from 
straight to squiggly to curved and more. Lines can be used for a wide 
range of purposes: stressing a word or phrase, connecting content to one 
another, creating patterns and much more. 




Color is used to generate 
emotions, define importance, 
create visual interest and more. 
CMYK (cyan/magenta/yellow/ 
black) is subtractive; RGB 
(red/green/blue) is additive. 

Some colors are warm and 
active (orange, red); some are 
cool and passive (blue, purple). 

There are various color types 
(primary to analogous) and 
relationships (monochromatic to 
triad) worth learning more about 
as well. 



Texture relates the to surface of an 
object; the look or feel of it. 
Concrete has a rough texture; 
drywall has a smooth and subtle 
texture. Using texture in design is a 
great way to add depth and visual 
interest. Printed material has actual, 
textile texture while screen material 
has implied texture. 


SHAPE 




Height + width = shape. We all learned basic 
shapes in grade school - triangles, squares, 
circles and rectangles. Odd or lesser seen 
shapes can be used to attract attention. 

There are three basic types of shape: 
geometric (triangles, squares, circles etc), 
natural (leaves, animals, trees, people), and 
abstracted (icons, stylizations, graphic 
representations etc). 




Value is how light or how dark an area looks. A gradient, 
shown above, is a great way to visualize value - 
everything from dark to white, all the shades in-between, 
has a value. Use value to create depth and light; to create 
a pattern; to lead the eye; or to emphasize. 


I 



I 


Space is the area around or 
between elements in a 
design. It can be used to 
separate or group 
information. Use it effectively 
to: give the eye a rest; define 
importance; lead the eye 
through a design and more. 




Size is how small or large something is: a small shirt 
vs. an extra large shirt, for example. Use size to define 
importance, create visual interest in a design (via 
contrasting sizes), attract attention and more. 
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Design 

Princip 

les 


Unity / Harmony 



PROXIMITY 


SIMILARITY 


CONTINUATION 


A sense of the distance 
between elements 


Ability to seem repeatable 
with other elements 


The sense of having a line 
or pattern extend 


••• 

REPETITION RHYTHM 

Elements being copied Achieved when recurring position, 

or mimicked numerous size, color, and use of a graphic element 

times has a focal point interruption 




SYMMETRY 

Elements on either side 
of the axis ere arranged 
similarly 


Balance 



• * 


ASYMMETRY 

Elements on each side 
differ in shape but still 
are in visual equilibrium 



RADIAL 

Elements are arranged 
around a circular form 


Hierarchy 






TREES 


NESTS 


WEIGHT 


Elements arranged in the 
order of a tree with a trunk, 
branches & sub branches 


Elements mapped on to 
each other as parents, 
children & grand children 


Elements of the same weight 
belong to the same class 
of hierarchical positions 




Ill, 

SIZE 

Elements of different 
sizes in relationships 
with each other 


Scale / Proportion 



RATIO 

Elements related to each 
other in a ratio appear 
together in visual harmony 



DIVISIONS 

These create focal points 
that automatically give a 
sense of the relationships 



Dominance / Emphasis 
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HIGHLIGHT 

COLOUR 

SIZE 

Breaking the visual 
hierarchy using form to 
lay emphasis 

To distinguish between 
elements In a series of 
similar forms 

Elements of different sizes 
focus the viewers attention 
accordingly 


Similarity & Contrast 



LIGHT & DARK LINE 

Clear foreground & Elements of varying textures 

background separation lend & forms bring about a 

contrast between elements contrasting effect 
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Design 

Golden 
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(Primary) 


BLUE GREEN 
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(Tertiary) 
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YELLOW ORANGE 

(Tertiary) 


YELLOW 

(Primary) 


YELLOW GREEN 

(Tertiary) 


GREEN 

(Secondary) 
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Color 
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Golden Ratio & The Grid System 
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Texture 
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White 


Space 
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Responsible for the 
research, architecture 
of the content, site map 
and its elements. 
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WEB 


designer 

User Interface Designer with a passion 
for designing beautful and functional 
user experiences. Mimmatet who 
believes that less is more. 




<coder> 






<html> 
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Front End Developer who focuses on 
wring clean, elegant and efficient 
code. Love HTMLS. CSS3, WordPress 
and a touch of jQuery. 
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Questions Worth Asking? 


> What will be the purpose of your website? 

> Who will your audience be? 

> What will be the content of your website? 

> What types of design are you aiming at? 



THE SURFACE -Visual Design / UI 


THE SKELETON - Wire-frame, 
Interaction patterns, Global navigation ... 


THE STRUCTURE - Information 
architecture, Defining content ... 


THE SCOPE - Functionality. 
Usefulness, Requirements ... 


THE STRATEGY - Business 
requirements, Defining user Needs, Goals 
and Aspirations ... 
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Layout 





Example 2 
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Sketch Layout 











Web Design, Ul Develop 


Father of the Internet 



I just had to take the hypertext idea and connect it to 
the TCP and DNS ideas and — ta-da! — the World Wide Web. 


—Sir, Tim Berners-Lee 
Known as the Creator of WWW 



HTML 

Hyper Text Markup Language 



<html> 





html Syntax 


<tag attribute=“value’ > 
content 
</tag> 


html Structure 

<html> 

<head> 

</head> 

<body> 

</body> 

</html> 


Tags 


Text 

- Heading <h#></h#> 

- Paragraph <P> </p> 

- Order list <ol> </ol> 

- Unorder list <ul> </ul> 

- List item <li> </li> 


Media 


- Image <img /> 

- Sound 

<audio> 

</audio> 

- Video 

<video> 

</video> 


Misc. 

- Link <a> </a> 

- Division <div> </div> 

- Table 

<table> 

</table> 


css 

Cascading Style Sheets 



.CSS { } 





CSS Syntax 


Selector [ 

property: value; 
property: value; 

} 


Selectors 



Selectors Tags 




body { 

font-family: Tahoma; 
background: green; 




Target Tags 




Selectors 


body div p { 

font-size: 18 px; 
color: #fffddd; 


Selectors 



#ayhaga{ 

width: 320px; 
border: 1 px solid red; 


Selectors 





.ahmed2{ 

position: absolute; 
margin: 5px 2px 5px 2px; 


JQuery 

Java Script Library 



JQuery 





Sources 


• w3.org/standards/webdesign/htmlcss 

• w3schools.com 

• ar.html.net 

• learn.shayhowe.com/html-css 

• material-ui.com 

• Tutsplus.com 


Applications 

Web D&P Languages Editors 



Code Editors 



WYSIWYG 



Microsoft® 


Expression* Web 


Dw 





CMS 

Content Management Systems 




Web Mastering 



• Domain Names 

• Hosting Servers 

• FTP 

• Servers OS’s 

• WHM/Cpanel 


ahmedfars.com 


Thank You ! 

ITahmed faris 

ENTREPRENEUR. WEB & UX/UI DESIGNER, 

FRONT-END DEVELOPER, INSTRUCTOR AND TRAINER 

Q WWW.ALFARIS.WS 
AHMED@ALFARIS.WS 


